<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2">
          <el-input v-model="value" placeholder="请输入内容" size="mini" class="top-ipt"></el-input>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker v-model="value" align="right" type="date" placeholder="发生日期" size="mini" style="width:140px;margin-left:5px;">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker v-model="value" align="right" type="date" placeholder="上报日期" size="mini" style="width:140px;margin-left:5px;">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="请选择" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" size="mini" style="float:right;">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="18">
        <el-button type="warning" icon="el-icon-download" size="mini" style="margin:1px 8px;">导出</el-button>
        <el-table :data="tableData" style="width: 100%;margin:10px;">
          <el-table-column prop="date" label="事件编号" />
          <el-table-column prop="name" label="事件类型" />
          <el-table-column prop="name" label="事件等级" />
          <el-table-column prop="name" label="患者姓名" />
          <el-table-column prop="name" label="发生科室" />
          <el-table-column prop="name" label="上报科室" />
          <el-table-column prop="name" label="发生时间" />
          <el-table-column prop="name" label="上报时间" />
          <el-table-column prop="name" label="状态" />
          <el-table-column prop="name" label="超时时限" />
          <el-table-column prop="name" label="操作" />
        </el-table>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card"  style="margin-left:20px; height:100vh;">
          <div slot="header" class="clearfix">
            <span>事件状态</span>
          </div>
          <div class="text item">

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
</style>